<template>
  <div class="info-panel">
    <div class="info-panel-title">{{ data.name }}</div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  name: "infoPanel",
  data() {
    return {
      // infoPanel: null,
    };
  },
  mounted() {
    // this.initInfoPanel();
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.info-panel {
  width: 100px;
  height: 20px;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #fff;
  position: absolute;
  // transform: translate(-50%, -130%);
  .info-panel-title {
    text-align: center;
    width: 100%;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
